/*
// 方法1: 通过行号
.challenge {
  display: grid;
  grid-template-rows: 100px 200px 400px 100px;
  grid-template-columns: repeat(3, 1fr) 200px;
  gap: 30px;
  margin: 30px auto;
  max-width: 960px;

  & > * {
    background: orangered;
    font-size: 30px;
    font-family: sans-serif;
    color: white;
  }

  .header {
    grid-column: 1/-1;
  }

  .main-content {
    grid-row: 3/4;
    grid-column: 1 / span 3;
  }
  .sidebar {
    grid-row: 2 / span 2;
    grid-column: 4/5;
  }

  .footer {
    grid-column: 1/-1;
  }
}
*/

/*
// 方法2: 通过命名行
.challenge {
  display: grid;
  grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
  grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
  gap: 30px;
  margin: 30px auto;
  max-width: 960px;

  & > * {
    background: orangered;
    font-size: 30px;
    font-family: sans-serif;
    color: white;
  }

  .header {
    grid-column: col-start 1 / grid-end;
  }

  .main-content {
    grid-row: main-start / main-end;
    grid-column: col-start 1 / col-end 3;
  }
  .sidebar {
    grid-row: box-start / main-end;
    grid-column: col-end 3 / grid-end;
  }

  .footer {
    grid-column: col-start 1 / grid-end;
  }
}
*/
// 方法3: 通过命名网格区域
.challenge {
  display: grid;
  grid-template-rows: 100px 200px 400px 100px;
  grid-template-columns: repeat(3, 1fr) 200px;
  grid-template-areas:
    "head head head head"
    "box box box side"
    "main main main side"
    "foot foot foot foot";
  gap: 30px;
  margin: 30px auto;
  max-width: 960px;

  & > * {
    background: orangered;
    font-size: 30px;
    font-family: sans-serif;
    color: white;
  }

  .header {
    grid-area: head;
  }

  .main-content {
    grid-area: main;
  }
  .sidebar {
    grid-area: side;
  }

  .footer {
    grid-area: foot;
  }
}
